import { OrbitControls } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import { useEffect } from "react";
import * as THREE from "three";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import gsap from "gsap";
interface props {
  getEvMap: (data: THREE.DataTexture) => void;
  gui: GUI;
}
export function Scence({ getEvMap }: props) {
  const { scene, camera, gl } = useThree();
  const addHdr = () => {
    // 添加HDR环境贴图
    new RGBELoader().load("/hdr/hdr1.hdr", (evMap) => {
      evMap.mapping = THREE.EquirectangularReflectionMapping;
      scene.background = evMap;
      scene.environment = evMap;
      getEvMap(evMap);
      console.log(evMap);

      // scene.backgroundBlurriness = 0.5;
      // scene.environmentIntensity = 0.5;
      // scene.traverse((child) => {
      //   if (child instanceof THREE.Mesh) {
      //     child.material.envMap = evMap;
      //     child.material.envMapIntensity = 0.5;
      //   }
      // });
    });
  };
  useFrame(() => {
    //允许光源渲染
    gl.shadowMap.enabled = true;
  });
  useEffect(() => {
    addHdr();
    // gsap.to(
    //   camera.position,
    //   { x: 10, y: 10, z: 10, duration: 10 ,yoyo:true, repeat: -1, ease: "power1.inOut" },
    // );
  }, []);

  return (
    <>
      {/* 添加点光源 */}
      <spotLight
        color={"0xffffff"}
        position={[0, 30, 0]}
        intensity={20000}
        castShadow={true}
      ></spotLight>

      {/* <ambientLight
        color={"0xffffff"}
        intensity={2}
        castShadow={true}
      ></ambientLight> */}
      <OrbitControls></OrbitControls>
      <axesHelper scale={80}></axesHelper>
    </>
  );
}
